<template>
  <div class="app-container activity-detail">
    <!-- 返回按钮 -->
    <el-page-header
      @back="$router.go(-1)"
      class="page-header"
    />

    <el-card v-loading="loading" class="detail-card">
      <!-- 文章式主体内容 -->
      <div class="article-container">
        <!-- 标题区（最顶部） -->
        <div class="article-header">
          <h1 class="main-title">{{ activity.title }}</h1>

          <div class="meta-info">
            <el-tag type="primary" class="type-tag">{{ activity.type || '未分类活动' }}</el-tag>
            <div class="basic-info">
              <span class="date-range">
                <i class="el-icon-time"></i>
                {{ formatDate(activity.startTime) }} 至 {{ formatDate(activity.endTime) }}
              </span>
              <span class="scenic-area" v-if="activity.scenicAreaId">
                <i class="el-icon-location"></i>
                关联景区：{{ activity.scenicAreaId }}
              </span>
            </div>
          </div>
        </div>

        <!-- 图片区（标题下方，内容上方） -->
        <div v-if="parsedImages.length" class="image-section">
          <el-carousel
            height="400px"
            :autoplay="true"
            :interval="5000"
            @change="handleCarouselChange"
          >
            <el-carousel-item v-for="(img, index) in parsedImages" :key="index">
              <image-preview
                :src="img"
                :width="'100%'"
                :height="400"
                @click="viewImage(img)"
              >
                <img
                  :src="img"
                  class="carousel-image"
                  alt="活动图片"
                >
              </image-preview>
            </el-carousel-item>
          </el-carousel>

          <!-- 图片缩略图导航 -->
          <div class="image-thumbnails">
            <div
              v-for="(img, index) in parsedImages"
              :key="index"
              class="thumbnail"
              :class="{ active: currentIndex === index }"
              @click="switchImage(index)"
            >
              <img :src="getImageUrl(img)" :alt="`活动图片 ${index+1}`">
            </div>
          </div>
        </div>

        <!-- 内容区（详情及其他信息） -->
        <div class="content-section">
          <el-divider content-position="left"><h3>活动详情</h3></el-divider>
          <!-- 添加富文本容器类名，用于样式穿透 -->
          <div class="rich-text-container detail-content" v-html="formatContent(activity.content || '暂无活动详情')"></div>

          <!-- 可扩展：活动亮点（如果有相关字段） -->
          <el-divider content-position="left" v-if="activity.highlights"><h3>活动亮点</h3></el-divider>
          <div class="rich-text-container highlights-content" v-if="activity.highlights" v-html="formatContent(activity.highlights)"></div>

          <!-- 可扩展：参与方式（如果有相关字段） -->
          <el-divider content-position="left" v-if="activity.participation"><h3>参与方式</h3></el-divider>
          <div class="participation-content" v-if="activity.participation">
            <div class="rich-text-container participation-inner" v-html="formatContent(activity.participation)"></div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getActivity } from "@/api/system/activity";
import imagePreview from "@/components/ImagePreview";

export default {
  name: "ActivityDetail",
  components: {
    imagePreview
  },
  data() {
    return {
      loading: true,
      activity: {},
      parsedImages: [], // 处理后的图片URL
      currentIndex: 0, // 当前图片索引
      // 图片基础路径（从环境变量获取，若未配置则使用空）
      baseUrl: process.env.VUE_APP_BASE_API || ""
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 获取活动详情
    async fetchData() {
      try {
        const id = this.$route.params.id;
        if (!id) {
          this.$message.error("参数错误");
          return this.$router.push("/activities");
        }

        const response = await getActivity(id);
        this.activity = response.data;
        this.parseImages(); // 解析图片
      } catch (error) {
        console.error("获取活动详情失败:", error);
        this.$message.error("获取活动详情失败");
        setTimeout(() => this.$router.push("/activities"), 2000);
      } finally {
        this.loading = false;
      }
    },

    // 解析图片URL（从imageUrls字段）
    parseImages() {
      const rawUrls = this.activity.imageUrls || "";
      this.parsedImages = rawUrls
        .split(",")
        .map(url => url.trim())
        .filter(url => url); // 过滤空字符串
    },

    // 处理图片路径（确保完整可访问）
    getImageUrl(url) {
      if (!url){
        console.log('传进来的图片路径是null')
        return "";
      }
      // 若URL已包含完整协议（http/https），直接返回
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
      }
      // 否则拼接基础路径（处理相对路径）
      // 避免重复添加斜杠（如baseUrl以/结尾，url以/开头时只保留一个）
      const finalUrl =  this.baseUrl + (this.baseUrl.endsWith('/') ? '' : '/') +
             (url.startsWith('/') ? url.substring(1) : url);
      console.log("传进来的图片最终url是：" + finalUrl);
      return finalUrl;
    },

    // 查看大图
    viewImage(url) {
      this.$refs.imagePreview?.showLargeImage(this.getImageUrl(url));
    },

    // 切换图片
    switchImage(index) {
      this.currentIndex = index;
    },

    // 轮播图切换时同步索引
    handleCarouselChange(index) {
      this.currentIndex = index;
    },

    // 格式化内容（先反转义HTML特殊字符，再处理排版，清理图片内联样式）
    formatContent(content) {
      if (!content) return "";

      // 第一步：HTML反转义（将提交时转义的字符还原）
      let unescapedContent = content
        .replace(/&amp;/g, '&')    // 还原 &
        .replace(/&lt;/g, '<')     // 还原 <
        .replace(/&gt;/g, '>')     // 还原 >
        .replace(/&quot;/g, '"')   // 还原 "
        .replace(/&#039;/g, "'");  // 还原 '

      // 第二步：清理图片的内联样式（移除width/height/style属性，避免覆盖CSS）
      unescapedContent = unescapedContent
        .replace(/<img([^>]*?)width="[^"]*?"/gi, '<img$1')  // 移除width属性
        .replace(/<img([^>]*?)height="[^"]*?"/gi, '<img$1') // 移除height属性
        .replace(/<img([^>]*?)style="[^"]*?"/gi, '<img$1'); // 移除style属性

      // 第三步：处理换行和段落排版
      return unescapedContent
        .replace(/\n\n+/g, '</p><p>')  // 空行分隔为段落
        .replace(/\n/g, '<br>')        // 单行换行转为<br>
        .replace(/^([^<]|$)/, '<p>$1') // 开头添加<p>（若没有）
        .replace(/([^>])$/, '$1</p>'); // 结尾添加</p>（若没有）
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return "未知时间";
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 核心：穿透scoped样式，限制富文本中图片的大小
::v-deep .rich-text-container {
  img {
    max-width: 100% !important; // 强制图片最大宽度不超过父容器
    height: auto !important;    // 保持图片原始比例，防止变形
    display: block;             // 图片独占一行
    margin: 15px auto;          // 上下间距15px，水平居中
    border-radius: 8px;         // 图片圆角
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 轻微阴影增强层次感
    transition: all 0.3s ease;  // 过渡动画

    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); // 悬停时加深阴影
    }
  }

  // 优化富文本段落样式
  p {
    margin-bottom: 15px;
    line-height: 1.8;
  }

  // 优化换行样式
  br {
    line-height: 2;
  }
}

.activity-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;

  .detail-card {
    border: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
  }

  .article-container {
    padding: 30px;

    // 标题区
    .article-header {
      text-align: center;
      margin-bottom: 30px;

      .main-title {
        font-size: 32px;
        color: #2c3e50;
        margin-bottom: 15px;
        line-height: 1.3;
        font-weight: 600;
      }

      .meta-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        .type-tag {
          padding: 5px 18px;
          font-size: 14px;
          background-color: #f0f7ff;
          color: #1890ff;
          border-color: #e6f7ff;
        }

        .basic-info {
          color: #666;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 20px;

          i {
            margin-right: 5px;
            font-size: 15px;
          }
        }
      }
    }

    // 图片区（标题下方，内容上方）
    .image-section {
      margin-bottom: 40px;
      border-radius: 8px;
      overflow: hidden;

      .carousel-image {
        width: 100%;
        height: 400px;
        object-fit: cover;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.01); // 轻微放大，增强交互感
        }
      }

      .image-thumbnails {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        overflow-x: auto;
        padding-bottom: 5px; // 避免滚动条遮挡

        .thumbnail {
          width: 100px;
          height: 70px;
          border: 2px solid transparent;
          border-radius: 4px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.2s;

          &.active {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          &:hover {
            transform: translateY(-3px);
          }
        }
      }
    }

    // 内容区（详情及以下）
    .content-section {
      color: #333;
      font-size: 16px;
      line-height: 2; // 行高放大，提升阅读体验

      .el-divider {
        margin: 30px 0;

        & > h3 {
          font-size: 20px;
          color: #2c3e50;
          font-weight: 500;
        }
      }

      // 参与方式特殊样式
      .participation-content {
        margin: 15px 0;

        .participation-inner {
          background-color: #f0f7ff;
          padding: 20px;
          border-radius: 6px;
          border-left: 4px solid #1890ff;
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .activity-detail {
    padding: 15px;

    .article-container {
      padding: 20px 15px;

      .article-header {
        .main-title {
          font-size: 26px;
        }

        .basic-info {
          gap: 15px;
          flex-direction: column;
          align-items: center;
        }
      }

      .image-section {
        .carousel-image {
          height: 280px; // 移动端图片高度减小
        }

        .image-thumbnails {
          .thumbnail {
            width: 80px;
            height: 60px;
          }
        }
      }

      .content-section {
        font-size: 15px;
        line-height: 1.8;

        .el-divider > h3 {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
